<template>
  <div class="index-container" v-title data-title="满易金">
    <div class="index-content">
      <keep-alive>
        <router-view @toContent="toContent"></router-view>
      </keep-alive>
    </div>
    <div class="index-tabs">
      <router-link :to="{name: 'home'}" tag="li">
        <div class="tab-container">
          <img class="tab-icon" :src="indexIconNormal"/>
          <p class="tab-title" :class="{'active': indexIconNormal==='../../../static/img/btn_home_select.png'}">首页</p>
        </div>
      </router-link>
      <router-link :to="{name: 'borrowing'}" tag="li">
        <div class="tab-container">
          <img class="tab-icon" :src="borrowingIconNormal"/>
          <p class="tab-title" :class="{'active': borrowingIconNormal==='../../../static/img/tab-jie-sel@2x.png'}">借贷</p>
        </div>
      </router-link>
      <router-link :to="{name: 'card'}" tag="li">
        <div class="tab-container">
          <img class="tab-icon" :src="cardIconNormal"/>
          <p class="tab-title" :class="{'active': cardIconNormal==='../../../static/img/tab-card-sel@2x.png'}">办卡</p>
        </div>
      </router-link>
      <router-link :to="{name: 'my'}" tag="li">
        <div class="tab-container">
          <img class="tab-icon" :src="myIconNormal"/>
          <p class="tab-title" :class="{'active': myIconNormal==='../../../static/img/btn_my_select.png'}">我的</p>
        </div>
      </router-link>
    </div>

  </div>
</template>

<script>
export default {
  name: 'index',
  computed: {
    indexIconNormal () {
      const normal = '../../../static/img/btn_home_normal.png'
      const select = '../../../static/img/btn_home_select.png'
      if (this.$route.path.indexOf('home') !== -1) {
        return select
      }
      return normal
    },
    myIconNormal () {
      const normal = '../../../static/img/btn_my_normal.png'
      const select = '../../../static/img/btn_my_select.png'
      if (this.$route.path.indexOf('my') !== -1) {
        return select
      }
      return normal
    },
    borrowingIconNormal () {
      const normal = '../../../static/img/tab-jie-nor@2x.png'
      const select = '../../../static/img/tab-jie-sel@2x.png'
      if (this.$route.path.indexOf('borrowing') !== -1 || this.$route.path.indexOf('content') !== -1) {
        return select
      }
      return normal
    },
    cardIconNormal () {
      const normal = '../../../static/img/tab-card-nor@2x.png'
      const select = '../../../static/img/tab-card-sel@2x.png'
      if (this.$route.path.indexOf('card') !== -1) {
        return select
      }
      return normal
    }
  },
  methods:{
    toContent(){
      this.$router.push('/index/content')
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import "~style/varibles.styl"
  .index-container
    overflow-x hidden
    .index-content
      margin-bottom 1.2rem
    .index-tabs
      position :fixed
      bottom :0
      left :0
      height :1.1rem
      display :flex
      width :100%
      box-shadow : 0 -5px 12px 0 #eee
      background :white
      li
        list-style :none
        text-align :center
        flex :1
      .tab-container
        display :flex
        flex-direction :column
        padding:.1rem 0
        .tab-icon
          width :.5rem
          height :.5rem
          margin: 0 auto
        .tab-title
          margin-top :.1rem
          font-size :.24rem
        .active
          color :$textButton
    .hidden-area
      height :1.1rem
</style>
